<template>
  <div class="permission-container">
    <div class="app-container">
      <el-card> <h2>权限</h2></el-card>

      <el-card>
        <el-button
          size="small"
          type="primary"
          @click="handelDialogOpen(1, '0')"
        >
          添加权限
        </el-button>
        <el-table
          border
          stripe
          style="margin-top: 20px"
          row-key="id"
          default-expand-all
          :data="prmTreeData"
        >
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button
                v-if="row.type === 1"
                type="text"
                @click="handelDialogOpen(2, row.id)"
              >
                添加权限点
              </el-button>
              <el-button type="text" @click="handelEditOpen(row.id)">
                编辑
              </el-button>

              <!-- <el-popconfirm
                confirm-button-text="好的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                title="这是一段内容确定删除吗？"
                :confirm="handelDelPerson(row.id)"
              >
                <el-button slot="reference" type="text">删除</el-button>
              </el-popconfirm> -->

              <el-button type="text" @click="handelDelPerson(row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 新增权限弹窗 -->
      <el-dialog
        title="新增权限(点)"
        :visible="showAddDialog"
        @close="handelDialogClose"
      >
        <el-form label-width="80px">
          <el-form-item label="权限名称" style="width: 90%">
            <el-input v-model="permisonForm.name" />
          </el-form-item>
          <el-form-item label="权限标识" style="width: 90%">
            <el-input v-model="permisonForm.code" />
          </el-form-item>
          <el-form-item label="权限描述" style="width: 90%">
            <el-input v-model="permisonForm.description" />
          </el-form-item>
          <el-form-item label="权限启用" style="width: 90%">
            <el-switch
              v-model="permisonForm.enVisible"
              active-color="#66b1ff"
              inactive-color="#f2f3f5"
              active-value="1"
              inactive-value="0"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="handelDialogClose">取消</el-button>
          <el-button type="primary" @click="handelAddPersion">确定</el-button>
        </template>
      </el-dialog>
      <!-- 编辑权限弹窗 -->
      <el-dialog
        title="新增权限(点)"
        :visible="showEditDialog"
        @close="handelEditClose"
      >
        <el-form label-width="80px">
          <el-form-item label="权限名称" style="width: 90%">
            <el-input v-model="permisonForm.name" />
          </el-form-item>
          <el-form-item label="权限标识" style="width: 90%">
            <el-input v-model="permisonForm.code" />
          </el-form-item>
          <el-form-item label="权限描述" style="width: 90%">
            <el-input v-model="permisonForm.description" />
          </el-form-item>
          <el-form-item label="权限启用" style="width: 90%">
            <el-switch
              v-model="permisonForm.enVisible"
              active-color="#66b1ff"
              inactive-color="#f2f3f5"
              active-value="1"
              inactive-value="0"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="handelEditClose">取消</el-button>
          <el-button type="primary" @click="handelEditPersion">确定</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getPrmListAPI,
  addPermisionAPI,
  getPermInfoAPI,
  editPermiAPI,
  delPermisonAPI
} from '@/api/permission'
import { list2Tree } from '@/utils/list2tree'
export default {
  name: 'Permission',
  data() {
    return {
      prmList: [],
      // 树形数据
      prmTreeData: [],

      showAddDialog: false,
      showEditDialog: false,
      // 权限表单
      permisonForm: {
        name: '',
        code: '',
        description: '',
        enVisible: ''
      }
    }
  },
  created() {
    this.getPrmList()
  },
  methods: {
    // 删除权限节点
    async handelDelPerson(delId) {
      try {
        const resp = await delPermisonAPI(delId)
        // console.log(resp)
        this.$message.success(resp.message)
      } catch (error) {
        // console.log(error)
        this.$message.error(error.message)
      } finally {
        this.getPrmList()
      }
    },
    // 编辑权限
    async handelEditPersion() {
      try {
        // 发起请求
        const resp = await editPermiAPI(this.permisonForm)
        // console.log(resp)
        // 成功提示
        this.$message.success(resp.message)
        // 更新列表数据
        this.getPrmList()
        // 关闭弹窗
        this.handelEditClose()
      } catch (error) {
        // 错误提示
        this.$message.error(error)
      }
    },
    // 关闭编辑弹窗
    handelEditClose() {
      this.showEditDialog = false
      this.permisonForm = {}
    },
    // 打开编辑弹窗时
    async handelEditOpen(editId) {
      this.showEditDialog = true
      this.permisonForm.id = editId
      const resp = await getPermInfoAPI(editId)
      console.log(resp)
      this.permisonForm = resp.data
    },
    // 新增权限
    async handelAddPersion() {
      // 校验
      // 发起新增请求
      try {
        const resp = await addPermisionAPI({
          ...this.permisonForm,
          type: this.type,
          pid: this.pid
        })
        // console.log(resp)
        this.$message.success(resp.message)
        // 关闭弹框
        this.handelDialogClose()
        // 获取权限列表
        this.getPrmList()
      } catch (error) {
        // console.log(error)
        this.$message.error(error.message)
      }
    },
    // 打开新增权限弹窗
    handelDialogOpen(type, pid) {
      this.showAddDialog = true
      // type: 1-> 页面访问权，2 -> 按钮操作权
      // pid: 父级id，0表示页面访问权，否则就是按钮
      // 保存type
      this.pid = pid
      this.type = type
    },
    // 获取列表
    async getPrmList() {
      const resp = await getPrmListAPI()
      // console.log(resp)
      this.prmList = resp.data
      this.prmTreeData = list2Tree(this.prmList, '0')
    },
    // 关闭新增权限弹窗
    handelDialogClose() {
      this.showAddDialog = false
    }
  }
}
</script>

<style>
</style>
